<template>
  <div v-if="show" class="modal-overlay" @click.self="closeModal">
    <div class="modal-content batch-grading-modal">
      <div class="modal-header">
        <h3>批量批改</h3>
        <button @click="closeModal" class="close-button">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <p class="selection-info">已选择 <strong>{{ selectedSubmissionsCount }}</strong> 份答卷进行批量批改。</p>
        <div class="batch-options">
          <label class="checkbox-container">
            <input type="checkbox" v-model="localOptions.autoGradeObjective">
            <span class="checkmark"></span>
            自动批改客观题 (单选、多选、判断)
          </label>
          <label class="checkbox-container">
            <input type="checkbox" v-model="localOptions.zeroForBlank">
            <span class="checkmark"></span>
            未作答题目统一给 0 分
          </label>
        </div>
      </div>
      <div class="modal-footer">
        <button @click="closeModal" class="btn btn-secondary">取消</button>
        <button @click="startBatchGrading" class="btn btn-primary">
          <i class="fas fa-check-double"></i> 开始批量批改
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
// ... (script remains the same)
import { ref, watch } from 'vue';

const props = defineProps({
  show: Boolean,
  selectedSubmissionsCount: Number,
  options: Object // { autoGradeObjective: Boolean, zeroForBlank: Boolean }
});

const emit = defineEmits(['update:show', 'process-batch-grading']);

const localOptions = ref({ ...props.options });

watch(() => props.options, (newOptions) => {
  localOptions.value = { ...newOptions };
});

const closeModal = () => {
  emit('update:show', false);
};

const startBatchGrading = () => {
  emit('process-batch-grading', { ...localOptions.value });
 // closeModal(); // Parent handles this if needed upon processing
};
</script>

<style scoped>
/* Using generic modal styles from ExamSelector.vue concept */
.modal-overlay { /* ... copy from ExamSelector or make global ... */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1010; /* Higher than other modals if stacked */
}

.modal-content { /* ... copy from ExamSelector or make global ... */
  background-color: #fff;
  padding: 20px;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
  width: 90%;
  max-width: 500px; /* Smaller for this modal */
}
.batch-grading-modal { /* specific if needed */
}

.modal-header { /* ... copy from ExamSelector or make global ... */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
.modal-header h3 { margin: 0; font-size: 1.25rem; }
.close-button { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #6c757d; }
.close-button:hover { color: #343a40; }

.modal-body {
  padding: 10px 0;
}
.selection-info {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: #495057;
}
.selection-info strong {
    color: #007bff; /* var(--primary-color) */
}

.batch-options .checkbox-container {
  display: block;
  margin-bottom: 0.75rem;
  position: relative;
  padding-left: 30px; /* Increased padding for larger checkmark or text */
  cursor: pointer;
  font-size: 0.95rem; /* Slightly larger text */
  user-select: none;
  color: #343a40; /* var(--dark-color) */
}

.batch-options .checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.batch-options .checkmark {
  position: absolute;
  top: 2px; /* Adjust for alignment */
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 0.2rem; /* var(--border-radius) */
  transition: background-color 0.15s, border-color 0.15s;
}

.batch-options .checkbox-container:hover input ~ .checkmark {
  background-color: #e0e0e0;
}

.batch-options .checkbox-container input:checked ~ .checkmark {
  background-color: #007bff; /* var(--primary-color) */
  border-color: #007bff; /* var(--primary-color) */
}

.batch-options .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.batch-options .checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #dee2e6; /* var(--border-color) */
  padding-top: 15px;
  margin-top: 20px;
}

.modal-footer .btn {
  margin-left: 0.5rem;
}
.btn { /* Basic button styling (can be global) */
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 0.25rem; /* var(--border-radius) */
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}
.btn-primary {
  background-color: #007bff; /* var(--primary-color) */
  color: white;
  border-color: #007bff;
}
.btn-primary:hover { background-color: #0056b3; border-color: #0056b3; }
.btn-primary i { margin-right: 0.4rem; }

.btn-secondary {
  background-color: #6c757d; /* var(--secondary-color) */
  color: white;
  border-color: #6c757d;
}
.btn-secondary:hover { background-color: #545b62; border-color: #545b62; }

</style>
